<template>
    <div  
    v-if="visible"
    class="zbfile-cover"
    >
        <div class="uploader">
            <upload-s
                class="upload"
                ref="upload"
                :fileguid="fileguid"
                filetype=".pdf"
                :filesize="10"
                single
                upload-only
                :extra="{typecode: 'zbwj', newtypecode: 'other'}"
                @beforeUpload="beforeUpload"
                @success="successHandler"
                @error="errorHandler"
            ></upload-s>

            <div class="btn-empty" @click="btnClick">
                <i class="el-icon-upload"></i>
                制作投标文件前请先导入招标文件
                <span class="tip">
                    (10MB以内pdf文件)
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { Loading } from 'element-ui';
import UploadS from './upload-s';

export default {
    components: {
        UploadS,
    },
    data() {
        return {
            fileguid: '',

            loading: null,

            visible: true,
        };
    },
    methods: {
        btnClick() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.$refs.upload.elClick();
            });
        },
        init(cb) {
            this.$get(`${this.$store.state.api.sysUrl}/upload/getfileguid.json`, data => {
                this.fileguid = data.fileguid;
                
                cb && cb();
            });
        },
        beforeUpload() {
            this.loading = Loading.service({
                body: true,
                text: '正在上传招标文件'
            });
        },
        errorHandler() {
            this.loading.close();
        },
        successHandler(res) {
            this.loading.close();

            this.loading = Loading.service({
                body: true,
                text: '正在解析招标文件'
            });

            var files = res.tdata,
                file = files[0] || {};

            this.$post(`${this.$store.state.api.sysUrl}/pdf/zbfileUtil/gettbfile.json`, {
                rowguid: file.rowguid,
            }, data => {
                this.$emit('open', {
                    ...data,
                    readonly: false,
                });

                this.loading.close();

                this.hide();
            });
        },
        show() {
            this.init(() => {
                this.visible = true;
            });
        },
        hide() {
            this.visible = false;

            this.fileguid = '';
        },
    },
    mounted() {
        this.init();
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .zbfile-cover{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, .9);

        .uploader{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;

            .upload{
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top: 0;
                overflow: hidden;
            }

            .btn-empty {
                width: 424px;
                box-sizing: border-box;
                border: solid 1px #dcdee0;
                font-size: 14px;
                color: #323233;
                padding: 22px 0;
                text-align: center;
                cursor: pointer;
                transition: all .1s;

                &:hover{
                    background: $primaryColor;
                    border-color: $primaryColor;
                    color: white;

                    i{
                        color: white;
                    }
                }

                i{
                    color: $primaryColor;
                }

                .tip{
                    font-size: 12px;
                }
            }
        }
    }
</style>